import styled from 'styled-components';

export const LoginWrap  =styled.div`
   width: 400px;
   
   box-shadow:0px 0px 34px 14px #ccc;
   background:#fff;
   position:absolute;
   left: 50%;
   top: 50%;
   padding:50px 50px;
   transform:translate(-50%,-50%);
   .borderDiv{
       height: 1px;
       width: 100%;
       background:#211e1e;
       margin:30px 0;
   }
`;
export const ChangeTitle  = styled.div`
    height: 40px;
    line-height:40px;
    width: 100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    .active{
        color: red;
    }
    span{
        font-size:22px;
        color: #969696;
        cursor:pointer;
    }
    span:hover{
        border-bottom:2px solid red;
    }
`;
export const SwitchContent = styled.div`
  .error{
      border-color:red!important;
  }
   .inptWrap{
       width: 100%;
       border:1px solid #c8c8c8;
       border-radius:4px;
       overflow:hidden;
       margin:18px 0px;
       background:hsla(0,0%,71%,.1);
       position:relative;
       .anticon{
           position:absolute;
           top: 14%;
           left: 4%;
       }
       input{
        width: 80%;
        float:right;
        /* background:hsla(0,0%,71%,.1); */
        color:#969696;
       }
       input,button{
        height: 50px;
        border:none;
        outline:none;
       }
       
   }
   .btnRwap{
       border:none;
        button{
            width: 100%;
            cursor:pointer;
            font-size:20px;
            background:#3194d0;
            border-radius:24px;
            color: #fff;
        }
    }
`; 
export const ErrorMag = styled.div`
   color: #f00;
   text-indent:10px;
`;